<indigo-entities-controls is-dashboard="true"></indigo-entities-controls>

<div class="main-page-content scroll-dashboard-full">
    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-info panel-main-h">
                <div class="panel-heading">experiments statistics</div>
                <div class="panel-body panel-body-nopad">
                    <div class="statistic-radio">
                        <input type="radio" name="experimentsSwitcher" ng-model="vm.dView" ng-change="vm.onViewChange()"
                               ng-value="'open'">
                        <div class="statistic-info statistic-green">
                            <span class="statistic-txt">Open</span>
                            <span class="count pull-right" ng-bind="vm.openExperimentsLength"></span>
                            <uib-progressbar animate="false" value="((vm.openExperimentsLength * 100)/100) || 0"
                                             type="success"></uib-progressbar>
                        </div>
                    </div>
                    <div class="statistic-radio statistic-orange">
                        <input type="radio" name="experimentsSwitcher" ng-model="vm.dView" ng-value="'wait'"
                               ng-change="vm.onViewChange()">
                        <div class="statistic-info statistic-orange">
                            <span class="statistic-txt">Waiting author’s signature</span>
                            <span class="count pull-right" ng-bind="vm.waitingExperimentsLength"></span>
                            <uib-progressbar animate="false" value="((vm.waitingExperimentsLength * 100)/100) || 0"
                                             type="success"></uib-progressbar>
                        </div>
                    </div>
                    <div class="statistic-radio statistic-yellow">
                        <input type="radio" name="experimentsSwitcher" ng-model="vm.dView" ng-value="'submitted'"
                               ng-change="vm.onViewChange()">
                        <div class="statistic-info statistic-yellow">
                            <span class="statistic-txt">Submitted by author</span>
                            <span class="count pull-right" ng-bind="vm.submittedExperimentsLength"></span>
                            <uib-progressbar animate="false" value="((vm.submittedExperimentsLength * 100)/100) || 0"
                                             type="success"></uib-progressbar>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-info panel-main-h">
                <div class="panel-heading">experiments</div>
                <div class="panel-body panel-body-nopad">
                    <div class="experiment-count-block">
                        <span ng-bind="(vm.submittedExperimentsLength + vm.openExperimentsLength)"></span>
                        <span>Experiments</span>
                        <span>(created during the last month)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-info panel-info-table" ng-if="vm.dView === 'open'">
        <div class="panel-heading">Open experiments <span class="count" ng-bind="vm.curExperiments.length"></span></div>
        <div class="panel-body panel-body-nopad">
            <div class="table-responsive">
                <table class="main-table table table-striped table-condensed dash-table">
                    <thead class="main-table__header">
                    <tr indigo-sort="vm.sortBy.field"
                        is-ascending="vm.sortBy.isAscending"
                        on-sort="vm.sort(predicate, isAscending)"
                        class="table-list">
                        <th indigo-sort-by="id"
                            class="table-list__item table-list__item_header dash-exp-id">
                            Experiment ID
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="name"
                            class="table-list__item table-list__item_header dash-exp-name">
                            Title
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="author.firstName"
                            class="table-list__item table-list__item_header">
                            Author
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th class="table-list__item table-list__item_header">
                            Co-authors
                        </th>
                        <th indigo-sort-by="project"
                            class="table-list__item table-list__item_header">
                            Project
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="creationDate"
                            class="table-list__item table-list__item_header dash-exp-date">
                            Creation Date
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="lastEditDate"
                            class="table-list__item table-list__item_header dash-exp-date">
                            Last Edit Date
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th class="table-list__item table-list__item_header">
                            Idle Workdays
                        </th>
                    </tr>
                    </thead>
                    <tbody class="main-table__body">
                    <tr ng-class="{'table-list' : true, 'reaction-popup' : !!exp.reactionImage}"
                        ng-repeat="exp in vm.curExperimentsPaged track by $index">
                        <td class="table-list__item dash-exp-id">
                            <a class="ellipsis"
                               ui-sref="entities.experiment-detail({projectId: exp.projectId, notebookId: exp.notebookId, experimentId: exp.experimentId})"
                               ng-bind="exp.id"></a>
                            <div style="background-image: url('data:image/svg+xml;base64,{{exp.reactionImage}}')"
                                 class="reaction-image"></div>
                        </td>
                        <td class="table-list__item dash-exp-name" title="{{exp.name}}">
                            <div class="ellipsis" ng-bind="exp.name"></div>
                        </td>
                        <td class="table-list__item" ng-bind="exp.author.firstName + ' ' + exp.author.lastName"></td>
                        <td class="table-list__item">
                            <ul>
                                <li ng-repeat="user in exp.coAuthors track by $index" ng-bind="user"></li>
                            </ul>
                        </td>
                        <td class="table-list__item dash-proj-name"><a class="ellipsis"
                                                                       ui-sref="entities.project-detail({projectId: exp.projectId})"
                                                                       ng-bind="exp.project"></a></td>
                        <td class="table-list__item dash-date" title="{{exp.creationDate | date:'MMM dd yyyy'}}">
                            <div class="ellipsis" ng-bind="exp.creationDate | date:'MMM dd yyyy'"></div>
                        </td>
                        <td class="table-list__item dash-date" title="{{exp.lastEditDate | date:'MMM dd yyyy'}}">
                            <div class="ellipsis" ng-bind="exp.lastEditDate | date:'MMM dd yyyy'"></div>
                        </td>
                        <td class="table-list__item"
                            ng-bind="exp.idleWorkdays + ' day(s)'"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="panel panel-info panel-info-table" ng-if="vm.dView === 'wait'">
        <div class="panel-heading">Experiments Waiting Author’s Signature <span class="count count-orange"
                                                                                ng-bind="vm.totalItems"></span></div>
        <div class="panel-body panel-body-nopad">
            <div class="table-responsive" indigo-scroller="x">
                <table class="main-table table table-striped table-condensed">
                    <thead class="main-table__header">
                    <tr indigo-sort="vm.sortBy.field"
                        is-ascending="vm.sortBy.isAscending"
                        on-sort="vm.sort(predicate, isAscending)"
                        class="table-list">
                        <th indigo-sort-by="id"
                            class="table-list__item table-list__item_header dash-exp-id">
                            Experiment ID
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="name"
                            class="table-list__item table-list__item_header">
                            Title
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="status"
                            class="table-list__item table-list__item_header">
                            Status
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="author.firstName"
                            class="table-list__item table-list__item_header">
                            Author
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="submitter.firstName"
                            class="table-list__item table-list__item_header">
                            Submitter
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th class="table-list__item table-list__item_header">
                            Witness
                        </th>
                        <th indigo-sort-by="creationDate"
                            class="table-list__item table-list__item_header">
                            Creation Date
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="lastEditDate"
                            class="table-list__item table-list__item_header">
                            Last Action Date
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th class="table-list__item table-list__item_header">
                            Idle Workdays
                        </th>
                    </tr>
                    </thead>
                    <tbody class="main-table__body">
                    <tr class="table-list" ng-repeat="exp in vm.curExperimentsPaged track by $index"
                        ng-class="{'table-list' : true, 'reaction-popup' : !!exp.reactionImage}">
                        <td class="table-list__item dash-exp-id">
                            <a href="{{vm.signatureServiceUrl}}" ng-bind="exp.id"></a>
                            <div style="background-image: url('data:image/svg+xml;base64,{{exp.reactionImage}}')"
                                 class="reaction-image"></div>
                        </td>
                        <td class="table-list__item" ng-bind="exp.name"></td>
                        <td class="table-list__item" ng-bind="exp.status"></td>
                        <td class="table-list__item" ng-bind="exp.author.firstName + ' ' + exp.author.lastName"></td>
                        <td class="table-list__item"
                            ng-bind="exp.submitter.firstName + ' ' + exp.submitter.lastName"></td>
                        <td class="table-list__item">
                            <ul>
                                <li ng-repeat="user in exp.witnesses track by $index"
                                    ng-bind="user.firstName + ' ' + user.lastName"></li>
                            </ul>
                        </td>
                        <td class="table-list__item dash-date" title="{{exp.creationDate | date:'MMM dd yyyy'}}">
                            <div class="ellipsis" ng-bind="exp.creationDate | date:'MMM dd yyyy'"></div>
                        </td>
                        <td class="table-list__item dash-date" title="{{exp.lastEditDate | date:'MMM dd yyyy'}}">
                            <div class="ellipsis" ng-bind="exp.lastEditDate | date:'MMM dd yyyy'"></div>
                        </td>
                        <td class="table-list__item"
                            ng-bind="exp.idleWorkdays + ' day(s)'"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <div class="panel panel-info panel-info-table" ng-if="vm.dView === 'submitted'">
        <div class="panel-heading">Experiments Submitted by Author <span class="count count-yellow"
                                                                         ng-bind="vm.totalItems"></span></div>
        <div class="panel-body panel-body-nopad">
            <div class="table-responsive" indigo-scroller="x">
                <table class="main-table table table-striped table-condensed">
                    <thead class="main-table__header">
                    <tr indigo-sort="vm.sortBy.field"
                        is-ascending="vm.sortBy.isAscending"
                        on-sort="vm.sort(predicate, isAscending)"
                        class="table-list">
                        <th indigo-sort-by="id"
                            class="table-list__item table-list__item_header dash-exp-id">
                            Experiment ID
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="name"
                            class="table-list__item table-list__item_header">
                            Title
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="status"
                            class="table-list__item table-list__item_header">Status
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="author.firstName"
                            class="table-list__item table-list__item_header">Author
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="submitter.firstName"
                            class="table-list__item table-list__item_header">
                            Submitter
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th class="table-list__item table-list__item_header">Witness
                        </th>
                        <th indigo-sort-by="creationDate"
                            class="table-list__item table-list__item_header">
                            Creation Date
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th indigo-sort-by="lastEditDate"
                            class="table-list__item table-list__item_header">
                            Last Edit Date
                            <span class="glyphicon glyphicon-sort experiments__icon-sort"></span>
                        </th>
                        <th class="table-list__item table-list__item_header">Comments
                        </th>
                    </tr>
                    </thead>
                    <tbody class="main-table__body">
                    <tr class="table-list" ng-repeat="exp in vm.curExperimentsPaged track by $index"
                        ng-class=" {'table-list' : true, 'reaction-popup' : !!exp.reactionImage}">
                        <td class="table-list__item dash-exp-id">
                            <a class="ellipsis"
                               ui-sref="entities.experiment-detail({projectId: exp.projectId, notebookId: exp.notebookId, experimentId: exp.experimentId})"
                               ng-bind="exp.id"></a>
                            <div style="background-image: url('data:image/svg+xml;base64,{{exp.reactionImage}}')"
                                 class="reaction-image"></div>
                        </td>
                        <td class="table-list__item" ng-bind="exp.name"></td>
                        <td class="table-list__item" ng-bind="exp.status"></td>
                        <td class="table-list__item" ng-bind="exp.author.firstName + ' ' + exp.author.lastName"></td>
                        <td class="table-list__item"
                            ng-bind="exp.submitter.firstName + ' ' + exp.submitter.lastName"></td>
                        <td class="table-list__item">
                            <ul>
                                <li ng-repeat="user in exp.witnesses track by $index"
                                    ng-bind="user.firstName + ' ' + user.lastName"></li>
                            </ul>
                        </td>
                        <td class="table-list__item dash-date" title="{{exp.creationDate | date:'MMM dd yyyy'}}">
                            <div class="ellipsis" ng-bind="exp.creationDate | date:'MMM dd yyyy'"></div>
                        </td>
                        <td class="table-list__item dash-date" title="{{exp.lastEditDate | date:'MMM dd yyyy'}}">
                            <div class="ellipsis" ng-bind="exp.lastEditDate | date:'MMM dd yyyy'"></div>
                        </td>
                        <td class="table-list__item">
                            <ul>
                                <li ng-repeat="comment in exp.comments track by $index" ng-bind="comment"></li>
                            </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="text-center" ng-if="vm.curExperiments.length > vm.curExperimentsPaged.length">
        <div class="pagination-sm"
             uib-pagination
             total-items="vm.totalItems"
             items-per-page="vm.itemsPerPage"
             ng-model="vm.page"
             ng-change="vm.doPage()">
        </div>
    </div>
</div>
